<template>
  <view>
		<h3 style="background-color: #ffffff; border-radius: 10px 10px 0 0; box-shadow: 0 8px 50px #9d9d9d33; height: 80rpx; width: 750rpx; line-height: 80rpx; text-align: center;">物资明细</h3>
		<view style="max-height: 80vh; padding: 20rpx 30rpx; overflow-y: auto;">
			<u-form
				:model="basicForm"
				:rules="rules"
				labelPosition="top"
				ref="form"
				labelWidth="auto"
				:labelStyle="{
					fontSize: '14px',
					color: '#B2B2B2',
					lineHight: '20px'
				}"
			>
				<u-form-item label="物料大类" prop="provisionBroad" required>
					<h-dropdown
						class="w-100"
						keyName="categoryName"
						placeholder="请选择"
						:api="api.queryProvisionBroadList"
						v-model="basicForm.provisionBroad"
						dataKey="result"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
						@change="exportWarehouseChange"
					/>
				</u-form-item>
				<u-form-item label="物料小类" prop="provisionSmall" required>
					<h-dropdown
						class="w-100"
						keyName="categoryName"
						ref="provisionSmall"
						placeholder="请选择"
						:columns="smallList"
						v-model="basicForm.provisionSmall"
						dataKey="result"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
						@change="provisionSmallChange"
					/>
				</u-form-item>
				<u-form-item label="物料编号" prop="materialBillId">
					<u--input disabled placeholder="请输入物料编号" v-model="basicForm.materialBillId"></u--input>
				</u-form-item>
				<u-form-item label="物料名称" prop="materialName" required>
					<h-select-material-input-popup
						style="width: 100%"
						v-model="basicForm.materialName"
						placeholder="请选择物料名称"
						border="surround"
						:materialFlag="true"
						auditStatus="2"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
						:provisionSmall="basicForm.provisionSmall"
						@change="materialNameBack"
					></h-select-material-input-popup>
				</u-form-item>
				<u-form-item label="规格型号" prop="specification">
					<u--input disabled placeholder="请输入规格型号" v-model="basicForm.specification"></u--input>
				</u-form-item>
				<u-form-item label="品牌" prop="brand">
					<u--input disabled placeholder="请输入品牌" v-model="basicForm.brand"></u--input>
				</u-form-item>
				<u-form-item label="数量" prop="amount" required>
					<h-number-input placeholder="请输入数量" :digit="0"  v-model="basicForm.amount"></h-number-input>
				</u-form-item>
				<u-form-item label="单位" prop="unit">
					<h-select-input-tag
						disabled
						class="w-100"
						v-model="basicForm.unit"
						objectField="basicForm.unit"
						placeholder="请选择单位"
						border="surround"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
						dictName="unit_type"
					></h-select-input-tag>
				</u-form-item>
				<u-form-item label="备注" prop="remark">
					<u--textarea :confirm-type="null" v-model="basicForm.remark" :maxlength="500" count placeholder="请输入备注"></u--textarea>
				</u-form-item>
			</u-form>
		</view>
		<view class="space-x-1 mt-1" style="display: flex; padding: 10rpx 30rpx; box-shadow: 50px 50px 8px 50px #23232333;">
			<u-button type="primary" text="关闭" :plain="true" :loading="loading" @click="onClose"></u-button>
		  <u-button type="primary" text="保存" :loading="loading" @click="onSubmit" :throttleTime="500"></u-button>
		  
		</view>
  </view>
</template>

<script>
import { queryProvisionBroadList, queryProvisionSmallList } from '@/api/purchase/ErpPurchaseCannibalizeForm'
import { erpPurchaseCannibalizeCheckStock } from '@/api/index'

export default {
  name: 'MaterialForm',
  props: {
    teamId: '',
    companyId: '',
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
		exportWarehouse: {
			type: String,
			default: '',
			required: false
		},
		storehouseName:{
			type: String,
			default: '',
			required: false
		},
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      api: {
        queryProvisionBroadList,
      },
      smallList: [],
      loading: false,
      basicForm: {
        provisionBroad: null, // 采购大类
        provisionSmall: null, // 采购小类
        materialBillId: null, // 物料编码
        materialName: null, // 物料名称
        specification: null, // 规格型号
        brand: null, // 品牌
        amount: null, // 数量
        unit: null, // 单位
        remark: '', // 备注
      },
      rules: {
        provisionBroad: [{ required: true, message: '请选择采购大类!', trigger: ['change', 'blur'] }],
        provisionSmall: [{ required: true, message: '请选择采购小类!', trigger: ['change', 'blur'] }],
        materialName: [{ required: true, message: '请选择物料名称!', trigger: ['change', 'blur'] }],
        amount: [
					{ type: 'number', required: true, message: '请输入数量!', trigger: ['change', 'blur'] },
					{ required: true, pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数!', trigger: ['change', 'blur'] }
				]
      },
    }
  },
  created() {},
  methods: {
		moveHandle() {
			
		},
    materialNameBack(material) {
      if (material) {
				this.$set(this.basicForm, 'materialBillId', material.materialBill) // 物料编码
				this.$set(this.basicForm, 'specification', material.specification) // 规格型号
				this.$set(this.basicForm, 'unit', material.unit) // 单位
				this.$set(this.basicForm, 'brand', material.brand) // 品牌
				this.$set(this.basicForm, 'amount', null) //数量
				//迭代16.7： 9、物资调拨单子表新增中字段“供应商”隐藏。
				// this.$set(this.basicForm, 'supplier', null)//供应商
				// 新增修改时填充名称翻译字典
				this.$set(this.basicForm, 'materialName_dictText', material.materialName)
			} else {
				this.$set(this.basicForm, 'materialBillId', null) // 物料编码
				this.$set(this.basicForm, 'specification', null) // 规格型号
				this.$set(this.basicForm, 'unit', null) // 单位
				this.$set(this.basicForm, 'brand', null) // 品牌
				this.$set(this.basicForm, 'amount', null) //数量
				//迭代16.7： 9、物资调拨单子表新增中字段“供应商”隐藏。
				// this.$set(this.basicForm, 'supplier', null)//供应商
				// 新增修改时填充名称翻译字典
				this.$set(this.basicForm, 'materialName_dictText', null)
			}
    },
    provisionSmallChange() {
      this.$set(this.basicForm, 'materialName', null) // 物料名称
      this.$set(this.basicForm, 'materialBillId', null) // 物料编码
      this.$set(this.basicForm, 'specification', null) // 规格型号
      this.$set(this.basicForm, 'unit', null) // 单位
      this.$set(this.basicForm, 'brand', null) // 品牌
      this.$set(this.basicForm, 'amount', null) //数量
      //迭代16.7： 9、物资调拨单子表新增中字段“供应商”隐藏。
      // this.$set(this.basicForm, 'supplier', null)//供应商
    },
    exportWarehouseChange(id) {
      this.provisionSmallChange()
      this.smallList = []
      this.$set(this.basicForm, 'provisionSmall', '')
      if (id) {
        this.findProvisionSmallList(id)
      }
			this.$nextTick(() => {
			  this.$refs.provisionSmall.loadData()
			})
    },
    findProvisionSmallList(value) {
      const parentId = value
      queryProvisionSmallList({ parentId }).then((res) => {
        if (res.success) {
          const data = res.result.map((item) => {
            return { id: item.id, categoryName: item.categoryName }
          })
          this.smallList = [data]
        } else {
          this.$u.toast(res.message)
        }
      })
    },
    reset() {
      this.$refs.form.resetFields()
    },
		async getCheckStock () {
			
					const res = await erpPurchaseCannibalizeCheckStock({
						storehouseId: this.exportWarehouse,
						materialName: this.basicForm.materialName,
						amount: this.basicForm.amount
					})
					
					if (res.success && !!res.result && res.result.isOk) {
						return Promise.resolve()
					} else if(!res.result.isOk) {
						this.$u.toast("（调出团队） "+this.storehouseName+" 仓库 "+this.basicForm.materialName_dictText+" "+res.result.message)
						return Promise.reject("（调出团队） "+this.storehouseName+" 仓库 "+this.basicForm.materialName_dictText+" "+res.result.message)
					}
				},
    async onSubmit() {
      await this.$refs.form.validate()
			await this.getCheckStock()
      if (!this.index) {
        this.$emit('submit', [
          {
            id: parseInt(Math.random() * 1000000000000),
            ...this.basicForm,
          },
          this.index,
        ])
      } else {
        this.$emit('submit', [this.basicForm, this.index])
      }
			
			this.$refs.form.resetFields()
    },
    onClose() {
      this.$emit('close')
			this.$refs.form.resetFields()
    },
  },
  watch: {
    'basicForm.provisionBroad'(val) {
      if (val) {
        this.findProvisionSmallList(val)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item__body__left__content__required {
		left: 0px !important;
	}
	/deep/ .u-form-item__body__left__content__label{
		padding-left: 20rpx !important;
	}
</style>
